<template>
	<view>
		<navbar mode="normal" title="结算"></navbar>
		<view class="content" v-if="canshow">
			<!-- 收货地址 -->
			<view class="address-bar">
				<view class="box" v-if="address.id != -1">
					<uni-icons class="icon" type="location" size="36" color="#2fb6ff"></uni-icons>
					<view class="text-content">
						<view class="info">
							<text class="name">{{address.name}}</text>
							<text class="phone">{{address.phone}}</text>
						</view>
						<view class="address">
							{{address.address}}
						</view>
					</view>
				</view>
				<view v-else style="font-size: 30rpx;margin: 20rpx;color: #2fb6ff;height: 100%;width: 100%;" @click="addAddress">
					你还没有地址哦,点击这里去添加地址~
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="goods-info">
				<!-- 店铺 -->
				<view class="store-info">
					<image class="head" :src="$urlPrefix+store.imageSrc"></image>
					<text class="name">{{store.name}}</text>
				</view>
				<!-- 商品 -->
				<view class="goods-card">
					<image class="image" :src="$urlPrefix+goods.mainImages[0]"></image>
					<view class="info">
						<text class="title">{{goods.title}}</text>
						<text class="package">套餐一</text>
					</view>
					<view class="coust">
						<view class="price">
							¥<text>{{goods.price}}</text>
						</view>
						<view class="num">
							x{{order.goodsNum}}
						</view>
					</view>
				</view>
				<view class="list">
					<view class="item" v-for="(item,index) in barItems" :key="index">
						<text class="i1">{{item.title}}</text>
						<text class="i2">{{item.content}}</text>
						<view class="end">
							<text class="i3">{{item.end}}</text>
							<uni-icons type="arrowright"></uni-icons>
						</view>
					</view>
					<view class="item">
						<text class="i1">订单备注</text>
						<input class="i2" placeholder="选填" placeholder-style="color:#ccc;">
						<view class="end">
							<text class="i3"></text>
							<uni-icons type="arrowright"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="box">
					<view class="price">总计：<text>{{allPrice}}</text>元</view>
					<view class="buttom" @click="pay">立即支付</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pop-box">
				<text class="title">请输入支付口令：</text>
				<view class="box">
					<input class="input" placeholder="未设置则无需填写" placeholder-class="input-text" password="" @input="inputPassword"/>
				</view>
				<text class="confirm" @click="confirmPassword">确认</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barItems: [{
						title: "配送方式",
						content: "普通配送",
						end: "快递 免邮"
					},
					{
						title: "运费险",
						content: "卖家赠送",
						end: ""
					},
					{
						title: "店铺优惠",
						content: "满100减10",
						end: ""
					}
				],
				order: {},
				canshow: false,
				nowUser: {},
				address:{id:-1},
				goods:{},
				store:{},
				orderId:0,
				allPrice:"",
				password:""
			};
		},
		methods:{
			confirmPassword(){
				var user = this.$getNowUser()
				if(user.payPassword != null){
					if(user.payPassword == this.password){
						this.$refs.popup.close()
						this.updateOrderStatus()
					}else{
						uni.showToast({
							icon:"none",
							title:"支付密码错误请重新提交"
						})
					}
				}else{
					this.$refs.popup.close()
					this.updateOrderStatus()
				}
			},
			paySuccess(){
				uni.showLoading({
					title:"支付中..."
				})
				setTimeout(function(){
					uni.hideLoading()
					uni.showToast({
						title:"支付成功！"
					})
					setTimeout(function(){
						uni.navigateBack({
							
						})
					},1000)
				},1500)
			},
			updateOrderStatus(){
				var order = this.order
				order.status = 1
				var vue = this
				this.$request("order/add",order,function(res){
					if(res.data.code==200){
						vue.paySuccess()
					}
				})
			},
			addAddress(){
				uni.navigateTo({
					url:"/pages/user-address/user-address"
				})
			},
			inputPassword(data){
				this.password = data.detail.value
			},
			pay(){
				this.$refs.popup.open()
			}, 
			getData(){
				var vue = this
				this.nowUser = this.$getNowUser()
				//获取当前订单信息
				this.$request("order/getOne", {
					id: vue.orderId
				}, function(res) {
					vue.order = res.data.data[0]
					var addressId = vue.$getNowUser().addressId
					//获取地址信息
					vue.$request("address/getOne",{id:addressId},function(res){	
						if(res.data.data.length != 0){
							vue.address = res.data.data[0]
						}
						//console.log(vue.order);
						//获取商品信息
						vue.$request("goods/get",{id:vue.order.goodsId},function(res){
							vue.goods = res.data.data[0]
							//获取店铺信息
							vue.$request("store/getOne",{id:vue.goods.storeId},function(res){
								vue.store = res.data.data[0]
								vue.allPrice = (parseFloat(vue.goods.price)*vue.order.goodsNum).toFixed(2)
								//console.log(vue.address);
								vue.canshow = true
							})
						})
					})
				})
			}
		},
		onLoad(data) {
			this.orderId = data.id
			this.getData()
		},
		onShow() {
			uni.showLoading({})
			var vue = this
			vue.canshow = false
			setTimeout(function() {
				vue.getData()
				uni.hideLoading()
			}, 1)
		}
	}
</script>

<style lang="scss">
	.pop-box{
		width: 750rpx;
		height: 500rpx;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		display: flex;
		flex-direction: column;
		
		.title{
			font-size: 34rpx;
			margin: 40rpx;
			font-weight: bold;
		}
		.box{
			width: 100%;
			//border: 1px red solid;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			.input{
				position: relative;
				top: -50rpx;
				font-size: 50rpx;
				border-bottom: 1px #ccc solid;
				.input-text{
					
				}
			}
		}
		.confirm{
			font-size: 32rpx;
			color: $my-main-color;
			position: absolute;
			right: 40rpx;
			bottom: 40rpx;
		}
	}
	.content {
		height: 1334rpx;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		//border: 2rpx blue solid;
		box-sizing: border-box;
		background-color: #f7f7f7;
		padding: 10rpx;
		position: relative;
		
		.address-bar {
			height: 200rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 0 10rpx;

			.box{
				height: 100%;
				width: 100%;
				display: flex;
				flex-direction: row;
				.icon {
					position: relative;
					top: 60rpx;
				}
				
				.text-content {
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 10rpx;
				
					.info {
						.name {
							font-size: 34rpx;
							font-weight: bold;
						}
				
						.phone {
							font-size: 28rpx;
							color: #ccc;
							margin-left: 10rpx;
						}
					}
				
					.address {
						margin-top: 10rpx;
						font-size: 28rpx;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
					}
				}
			}
		}

		.goods-info {
			margin-top: 10rpx;
			height: 800rpx;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 10rpx 10rpx;
			align-items: center;
			box-sizing: border-box;

			.store-info {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin: 10rpx;
				width: 95%;


				.name {
					font-size: 32rpx;
					margin-left: 10rpx;
				}

				.head {
					height: 40rpx;
					width: 40rpx;
				}
			}

			.goods-card {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: auto;
				margin-top: 10rpx;
				padding: 0 10rpx;

				//border: 2rpx red solid;
				.image {
					height: 150rpx;
					width: 150rpx;
				}

				.info {
					display: flex;
					flex-direction: column;
					width: 360rpx;
					margin-left: 20rpx;

					.title {
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						font-size: 30rpx;
						font-weight: bold;
					}

					.package {
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #ccc;
					}
				}

				.coust {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					//border: 2rpx red solid;
					position: relative;
					left: 20rpx;

					.price {
						font-size: 28rpx;

						text {
							font-size: 34rpx;
							color: red;
						}
					}

					.num {
						font-size: 28rpx;
						color: #ccc;
					}
				}
			}
			.list{
				display: flex;
				width: 100%;
				margin-top: 40rpx;
				flex-direction: column;
				.item {
					display: flex;
					flex-direction: row;
					width: 100%;
					position: relative;
					height: 70rpx;
					align-items: center;
					
					.i1 {
						font-size: 30rpx;
						font-weight: bold;
						position: absolute;
						left: 40rpx;
					}
				
					.i2 {
						font-size: 30rpx;
						color: #ccc;
						margin-left: 200rpx;
					}
				
					.end {
						font-size: 28rpx;
						position: absolute;
						right: 10rpx;
					}
				}
			}
		}
		
		.bottom{
			position: absolute;
			//border: 2rpx red solid;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;
			height: 100rpx;
			width: 100%;
			bottom: 90rpx;
			left: 0rpx;
			.box{
				position: relative;
				display: flex;
				flex-direction: row;
				align-items: center;
				.price{
					position: absolute;
					top: 22rpx;
					left: 20rpx;
					font-size: 28rpx;
					text{
						font-size: 36rpx;
						color: red;
					}
				}
				.buttom{
					position: absolute;
					right: 10rpx;
					top: 12rpx;
					font-size: 30rpx;
					font-weight: bold;
					height: 70rpx;
					width: 200rpx;
					display: flex;
					flex-direction: row;
					justify-content: center;
					border-radius: 20rpx;
					align-items: center;
					border: 2rpx #ccc solid;
					background-color: #DD524D;
					color: #fff;
				}
			}
		}
	}
</style>
